import React, { Component } from 'react';
import './App.css';


import Alert from "./components/alert";
import RowItem from "./components/rowitem";
import SimpleSlider from "./components/slider";


class App extends Component {
  constructor() {
    super()
    this.state = {
      // 九宫格内容list
      list: [
        { 'id': 0, 'title': "谢谢参与" }, 
        { 'id': 1, 'money': "168.88" },
        { 'id': 2, 'money': "1.88" },
        { 'id': 3, 'title': "谢谢参与" },
        { 'id': 4, 'money': "0.88" },
        { 'id': 5, 'money': "88.88" },
        { 'id': 6, 'money': "8.88" },
        { 'id': 7, 'money': "0.08" }
      ],
      slidList:[
        '浙***公司 已经获得0.08元现金',
        '浙***公司 已经获得0.88元现金',
        '杭***公司 已经获得8.88元现金',
        '浙***公司 已经获得88.88元现金',
        '杭***公司 已经获得8.88元现金',
        '浙***公司 已经获得168.88元现金',
        '西***公司 已经获得1.88元现金',
        '浙***公司 已经获得8.88元现金',
        '安***公司 已经获得88.88元现金',
      ],
      // 被选中的格子的ID
      activedId: '',
      // 中奖ID
      lotteryId: null,
      // 获得lotteryId之后计算出的动画次数
      times: 0,
      // 当前动画次数
      actTimes: 0,
      // 是否正在抽奖
      isRolling: false,
      //
      showAlert:false,
      // 弹出渲染的文字
      alertText:'',
      //今日剩余次数
      today:2,
    }
    this.changeOn = this.changeOn.bind(this)
  }
  handleBegin() {
    // this.state.isRolling为false的时候才能开始抽，不然会重复抽取，造成无法预知的后果
    if (!this.state.isRolling) {
      // 点击抽奖之后，我个人做法是将于九宫格有关的状态都还原默认
      this.setState({
        activedId: '',
        lotteryId: null,
        times: 0,
        actTimes: 0,
        isRolling: true
      }, () => {
        // 状态还原之后才能开始真正的抽奖
        this.handlePlay()
      })
    }
  }
  handlePlay() {
    // 随机获取一个中奖ID
    // let lottery = 1;//Math.floor(Math.random() * 8);
    let lottery = Math.floor(Math.random() * 8);
    console.log(lottery)
    this.setState({
      lotteryId: lottery,
      activedId: 0
    })
    // 随机算出一个动画执行的最小次数，这里可以随机变更数值，按自己的需求来
    let times = this.state.list.length * Math.floor(Math.random() * 5 + 4);
    // console.log('times',times,3000/times)
    this.setState({
      times: times
    })
    // 抽奖正式开始↓↓
    this.begin = setInterval(() => {
      let num;
      if (this.state.activedId === this.state.lotteryId && this.state.actTimes > this.state.times) {
        // 符合上述所有条件时才是中奖的时候，两个ID相同并且动画执行的次数大于(或等于也行)设定的最小次数
        clearInterval(this.begin)

        this.setState({
          isRolling: false
        })
        this.end(this.state.lotteryId)
        return
      }

      // 以下是动画执行时对id的判断
      // console.log(this.state.activedId, this.state.actTimes, this.state.activedId === '')
      if (this.state.activedId === '') {
        num = 0
        this.setState({
          activedId: num
        })
      } else {
        num = this.state.activedId
        if (num === 7) {
          num = 0
          this.setState({
            activedId: num
          })
        } else {
          num = num + 1
          this.setState({
            activedId: num
          })
        }
      }

      this.setState({
        actTimes: this.state.actTimes + 1
      })
      // console.log(5000 / this.state.actTimes, this.state.actTimes)

    }, 3000 / times)
  }
  end(id){
    // console.log(id);
    this.state.list.forEach(item => {
      if (item.id === id && item.money){
        this.setState({
          showAlert: true,
          alertText: item.money
        })
      } else if (item.id === id && item.title){
        this.setState({
          showAlert: true,
          alertText: item.title
        })
      }
    });

  }
  changeOn(res){
    // console.log(res)
    this.setState({
      showAlert: res,
      alertText:''
    })
  }
  render() {
    const { list, activedId, showAlert, alertText, isRolling, slidList, today } = this.state;
    return (
      <div className="App">
        <Alert show={showAlert} text={alertText}  callbackParent={this.changeOn}></Alert>
        <div className="lottery">
          <div className='header'>
            <h1>开发票抽现金红包 最高<span>168.88元</span></h1>
          </div>
          <div className='box'>
            <div className="lottery__container">
              <div className="container__area">
                <div className={isRolling ? 'begin__btn begin__btn_dis' : 'begin__btn'} onClick={() => this.handleBegin()}>
                  点击开始
                </div>
                <div className="area__row">
                  <RowItem content={list[0]} activedId={activedId} />
                  <RowItem content={list[1]} activedId={activedId} />
                  <RowItem content={list[2]} activedId={activedId} />
                </div>
                <div className="area__row">
                  <RowItem content={list[7]} activedId={activedId} />
                  <RowItem content={list[3]} activedId={activedId} />
                </div>
                <div className="area__row">
                  <RowItem content={list[6]} activedId={activedId} />
                  <RowItem content={list[5]} activedId={activedId} />
                  <RowItem content={list[4]} activedId={activedId} />
                </div>
              </div>
            </div>
            <div className='lottery__shim'></div>
            <div className='lottery__list'>
              <SimpleSlider list={slidList}/>
              <div className='bottom'>

                <div className='today'> 今日还有<span>{today}</span>次机会</div>
                <div className='tips'>次日0点清空当天抽奖机会</div>
                <a className='role underline'>详见活动规则</a>
                <div className='ignore underline'>
                  <img src="" alt=""/>
                  该红包消息不再提醒
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default App;
